<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/net.ico" type="image/x-icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1325002_myop8zh0cn.css">
    <title>music</title>
    <style>
        /*
      vw：1vw等于视口宽度的1%;vh：1vh等于视口高度的1%。
      em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多
      */
        
        #load {
            width: 100vw;
            height: 100vh;
            display: none;
            overflow: hidden;
            background-color: #dd001b;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 10px;
            z-index: 999;
        }
        
        .index-title {
            position: absolute;
            top: 2.3em;
            width: 100%;
            color: #fff;
            font-size: 4.6em;
            line-height: 1.5;
            text-align: center;
            opacity: 0;
            animation-name: titleIn;
            animation-fill-mode: both;
            animation-duration: 1s;
        }
        /*animation-fill-mode规定当动画不播放时
        （当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
        动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
        */
        
        .index-icon {
            position: absolute;
            bottom: 6em;
            font-size: 2em;
            line-height: 1.5;
            width: 100%;
            color: #fff;
            text-align: center;
            float: right;
            opacity: 0;
            animation-name: iconIn;
            animation-duration: 3s;
            animation-delay: 2s;
            animation-fill-mode: both;
        }
        
        @keyframes titleIn {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 0.25;
            }
            50% {
                opacity: 0.5;
            }
            75% {
                opacity: 0.75;
            }
            100% {
                opacity: 1;
            }
        }
        
        @keyframes iconIn {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 0.25;
            }
            50% {
                opacity: 0.5;
            }
            75% {
                opacity: 0.75;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div id="load">
        <p class="index-title">音樂的力量</p>
        <p class="index-icon"><svg t="1567819718363" class="icon" style="transform: translateY(40%)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1950" width="50" height="50">
        <path
          d="M268.2 89.2h498.9c92 0 166.3 74.3 166.3 166.3v498.9c0 92-74.3 166.3-166.3 166.3H268.2c-92 0-166.3-74.3-166.3-166.3V255.5c0-92 74.3-166.3 166.3-166.3z m0 0"
          fill="#D92916" p-id="1951"></path>
        <path
          d="M640 196.4c19.7 4.8 38.2 13.8 54.2 26.2 6.1 4.3 10.8 10.1 13.8 16.9 4.3 10.6 3.2 22.6-3.1 32.1-10.2 15.9-31.3 20.7-47.3 10.7-3.8-2.4-6.6-5.9-10.4-7.9-10.1-7.1-22.1-11.1-34.5-11.4-8.5 0.9-16.4 5-22.1 11.4-5.7 5.8-8.2 14.1-6.6 22.1l12.8 48c30.7 1.2 60.6 9.9 87 25.5 25.6 15.7 48.2 35.9 66.6 59.7 15.7 20.6 27.4 44.1 34.5 69 7.5 25.9 10.5 52.9 8.6 79.7-1.6 22.6-6.3 44.9-13.8 66.3-19.9 52.4-56.2 97-103.6 127-34.7 21.6-73.7 35.3-114.3 40-27.8 4.1-56.1 4.1-83.9 0-57.6-10-110.6-38.1-151.2-80.1-71-72-100.6-175.1-78.4-273.8 20.6-93.6 85.9-171 174.7-207.1 12.6-5 26.7-4.2 38.7 2.1 10.3 7.4 15.8 19.9 14.2 32.5-1.5 12.8-10 23.7-22.1 28.3-76.2 29-130.3 97.4-141.2 178.1-5 37.1-0.7 74.8 12.4 109.8 18.8 51.1 55.6 93.6 103.6 119.4 29.1 15.1 61.4 23 94.2 22.8 27-0.2 53.7-4.9 79.1-14.2 43.7-15.6 80.2-46.8 102.2-87.7 5.5-9.8 9.9-20.3 13.1-31.1 9.1-31.3 9.1-64.6 0-96-8-26.1-23.2-49.4-43.8-67.3-9-7.9-18.7-15-29-21.1-9.1-5-18.9-8.7-29-11 6.9 27.6 14.5 55.2 21.7 83.2l3.5 20c1.9 57.7-38.3 108.3-94.9 119.4-28.6 5.7-58.3 0.1-82.9-15.5-22.9-15.2-40.1-37.5-49-63.5-5.1-14.6-7.8-29.8-8.3-45.2-1.8-33.8 7.4-67.2 26.2-95.3 23.3-32.6 57.3-56 96-66.3l-8.3-32.1c-7-22.9-5.1-47.5 5.2-69 6.1-12 14.5-22.7 24.9-31.4 10.5-10.2 23.1-17.9 36.9-22.8 17.5-4.7 36-4.9 53.6-0.4z m0 0"
          fill="#FFFFFF" p-id="1952"></path>
        <path
          d="M497.4 448.4c-10.2 10.8-17.3 24.1-20.4 38.7-2.6 13.2-2.6 26.8 0 40 2.6 14.9 10.8 28.2 22.8 37.3 10.1 6.9 22.6 9.3 34.5 6.6 21.8-4.2 37.8-22.7 39-44.9-0.7-5.4-1.7-10.7-3.1-15.9l-23.8-90.1c-18.5 5-35.4 14.7-49 28.3z m0 0"
          fill="#D92916" p-id="1953"></path>
      </svg>网易云音乐</p>
    </div>
    <div id="app"></div>
    <script>
        const load = document.getElementById('load')

        const body = document.getElementsByTagName('body')[0]

        let data = sessionStorage.getItem('load');

        console.log(!data);
        if (!data) {
            setLoad(body, load)
        }

        function setLoad(body, load) {
            console.log('执行了');

            body.style.overflow = 'hidden';

            load.style.display = 'block';

            sessionStorage.setItem('load', 1);

            setTimeout(() => {
                load.style.display = 'none'
                body.style.overflow = '';
            }, 5000);
        }
    </script>
    <script src="./vue.dll.js"></script>
</body>

</html>